<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="searchForm" class="header-area" :model="searchForm" label-width="80px" style="height: auto">
				<el-row>
					<!-- <el-col :span="4">
						<el-form-item label="主订单id" prop="orderId">
							<el-input type="text" size="small" v-model="searchForm.orderId" placeholder="商城订单ID"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="4">
						<el-form-item label="主订单编号" prop="orderNo" label-width="90px">
							<el-input type="text" size="small" v-model="searchForm.orderNo" placeholder="主订单编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="子订单编号" prop="subOrderNo" label-width="90px">
							<el-input type="text" size="small" v-model="searchForm.subOrderNo" placeholder="子订单编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="商家编号" prop="mchId">
							<el-input type="text" size="small" v-model="searchForm.mchId" placeholder="商家编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="分账商家编号" prop="accountMchId" label-width="110px">
							<el-input type="text" size="small" v-model="searchForm.accountMchId" placeholder="分账商家编号"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="6">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
								v-model="createTime"
								size="small"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%;"
								@change="chooseCreateTime"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="2">
						<div class="search-submit">
							<el-button type="primary" size="small" @click="submitSearch">查询</el-button>
							<el-button type="primary" plain size="small" @click="resetSearch">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 表格 -->
		<template>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				
				<el-table-column label="平台流水号" prop="partySerialNo"></el-table-column>
				
				<!-- <el-table-column label="主订单id" prop="orderId" width="140"></el-table-column> -->
				<el-table-column label="主订单编号" prop="orderNo" width="140"></el-table-column>
				<el-table-column label="主订单金额" prop="totalFee" width="120"></el-table-column>
				<el-table-column label="主订单实付金额" prop="totalPayFee" width="120"></el-table-column>
				
				<el-table-column label="商家编号" prop="mchId" width="120"></el-table-column>
				<el-table-column label="子订单编号" prop="subOrderNo" width="120"></el-table-column>
				<el-table-column label="子订单金额" prop="subFee" width="120"></el-table-column>
				<el-table-column label="子订单实付金额" prop="subPayFee" width="120"></el-table-column>
				
				<el-table-column label="分账商家编号" prop="accountMchId" width="120"></el-table-column>
				<el-table-column label="分账金额" prop="accountFee" width="120"></el-table-column>
				
				<el-table-column label="支付方式" prop="payMethod" width="110" align="center">
					<template slot-scope="scope">
						<el-tag type="mini">微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="100" :formatter="forDate"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="110" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="searchForm.page"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="searchForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<order-detail-dialog
				:isShow="showDetailDialog"
				:item="currentItem"
				@close="closeDetailDialog"
			></order-detail-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getOrderList } from '@api/profitAllocation/profitAllocation'
	import orderDetailDialog from './components/order-detail-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			orderDetailDialog,
		},
		data() {
			return {
				searchForm: {
					orderId: '', //主订单ID，建议查询指定商城订单对应的分账明细时使用
					orderNo: '', //主订单：订单编号
					subOrderNo: '', //子订单：客户方子订单，编号不允许重复
					mchId: '', //子订单：商家编号，取订单所属店铺对应的商家编号
					accountMchId: '', //分账信息：分账商家编号
					partySerialNo: '', //客户方（平台）流水号
					createTimeStart: '',
					createTimeEnd: '',
					page: 1,
					pageSize: 10,
				},
				createTime: [],
				
				tableData: [],
				total: 0,
				
				showDetailDialog: false,
				currentItem: {},
			}
		},
		methods: {
			getData() {
				getOrderList(this.searchForm)
					.then(res => {
						let list = res.data.content;
						this.total = res.data.total;
						
						list.forEach(item => {
							item.totalFee = '¥' + item.totalFee.toFixed(2);
							item.totalPayFee = '¥' + item.totalPayFee.toFixed(2);
							item.subFee = '¥' + item.subFee.toFixed(2);
							item.subPayFee = '¥' + item.subPayFee.toFixed(2);
							item.accountFee = '¥' + item.accountFee.toFixed(2);
						});
						
						this.tableData = list;
					})
			},
			handleSizeChange(val) { //处理显示条数
				this.searchForm.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) { //处理翻页
				this.searchForm.page = val;
				this.getData();
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},
			
			chooseCreateTime(val) {
				this.searchForm.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
				this.searchForm.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
			},
			submitSearch() { //搜索
				this.searchForm.page = 1;
				this.getData();
			},
			resetSearch() {
				this.$refs.searchForm.resetFields();
				this.searchForm.createTimeStart = '';
				this.searchForm.createTimeEnd = '';
				this.createTime = [];
				
				this.searchForm.page = 1;
				this.getData();
			},
			
			viewDetail(item) {
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	
</style>